<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      background-color: #ccc;
    }
    .active {
      background-color: #f00;
    }
    .jihuo {
      background-color: #f00;
    }
  </style>
</head>
<body>
  <div id="app">
    <!-- <div class="box" :style="`width: ${width}px; height: ${height}px; background: #ccc;`"></div> -->
    <!-- <div :style="{width: width + 'px', height: height + 'px', background: '#ccc'}"></div> -->
    <!-- <div :style="[{width: width + 'px', height: height + 'px'}, 'background: #2c2c2c;']"></div> -->

    <!-- <div
      class="box"
      :class="active ? 'active' : ''"
      :style="`width: ${width}px; height: ${height}px;`"
    ></div> -->
    <div
      class="box"
      :class="{jihuo: active}"
      :style="`width: ${width}px; height: ${height}px;`"
    ></div>

    <button @click="width = 200">修改宽度</button>
    <button @click="active = !active">修改激活</button>
  </div>

  <script src="./lib/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          width: 300,
          height: 200,
          active: true,
        }
      },
    }).mount('#app')
  </script>
</body>
</html>